<template>
    <view class="swpier-container">
        <view class="windows">
            <view class="swiper-content" :style="moveStyle" @touchstart="touchstart" @touchmove="touchmove">
                <pictureText v-for="(item, index) in swiperList" :key="index" :plant="item"></pictureText>
            </view>
        </view>
    </view>
</template>

<script>
    import {sysInfo} from '../common/global.js';
    import pictureText from './picture-text.vue';
    export default {
        name: 'swiper-bar',
        components: {
            pictureText
        },
        props: ['swiperList'],
        data() {
            return {
                moveStart: 0, // 移动起点
                moveEnd: 0, // 移动终点
                moveStyle: {
                    left: '0rpx'
                },
                swiperX: 0, // 横向滑动的left值
                swiperWidth: 0, // 横向滑动的宽度
            };
        },
        methods: {
            /**
             * 触摸开始
             * */
            touchstart(evt) {
                // 鼠标起始点
                this.moveStart = evt.touches[0].pageX;
                // 当前的left
                this.swiperX = parseFloat(this.moveStyle.left)
                const query = uni.createSelectorQuery().in(this);
                query.select('.swiper-content').boundingClientRect(data => {
                    this.swiperWidth = data.width;
                }).exec();
                // console.log(this.moveStart, this.swiperX)
            },
            /**
             * 触摸移动
             * */
            touchmove(evt) {
                this.moveEnd = evt.touches[0].pageX;
                let left = this.swiperX + ((this.moveEnd - this.moveStart) * 2);
                let width = (this.swiperWidth - sysInfo.windowWidth) * 2
                console.log(left, '-', - width)
                if (left > 0) {
                    this.moveStyle.left = '0rpx';
                    return;
                } else if(left < - width){
                    this.moveStyle.left = -width + 'rpx';
                    return;
                }
                
                this.moveStyle.left = left + 'rpx';
                // console.log(this.moveStyle.left)
            },
            /**
             * 触摸结束
             * */
            touchend(evt) {
                let x = parseFloat(this.moveStyle.left);
                // let stepX = 0;
                // if(x > this.swiperX) {
                //     stepX += 50
                // } else {
                //     stepX -= 50
                // }
                // this.moveEnd = evt.touches[0].pageX;
                // let left = this.swiperX + stepX;
                // let width = (this.swiperWidth - sysInfo.windowWidth) * 2
                // if (left > 0 || left < - width) {
                //     return;
                // }
                // this.moveStyle.left = left + 'rpx';
            }
        },
        mounted() {
            
            console.log(this.swiperList)
        }
    }
</script>

<style lang="less" scoped>
    .swpier-container {
        margin: 20rpx 0;
        .windows {
            width: 100%;
            height: 410rpx;
            position: relative;
            overflow: auto;
            background: #f8f8f8;
            .swiper-content {
                position: absolute;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                
                .picture-container {
                    width: 350rpx;
                }
            }
        }
    }
</style>
